<template>
  <div class="container">
    <el-card style="margin: 10px 10px 0 10px">
      <el-form>
        <el-row type="flex" justify="space-between" align="middle">
          <el-form-item label-width="85px" label="关键字" size="small">
            <el-input
              placeholder="根据编号搜索"
              v-model.trim="page.keyword"
              @keydown.enter.native="handleFilter"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-col type="flex" justify="end">
              <el-button size="small" @click="resetForm">清除</el-button>
              <el-button size="small" type="primary" @click="handleFilter"
                >搜索</el-button
              >
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>
      <el-row>
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-table
          highlight-current-row
          :data="list"
          :header-cell-style="{ background: '#fafafa', color: '#6060266' }"
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="编号"
            align="center"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            :formatter="formatQuestion"
            align="center"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="questionIDs"
            label="题目编号"
            align="center"
            width="210"
          >
            <template slot-scope="{ row }">
              <div v-for="(item, index) in row.questionIDs" :key="index">
                <a
                  href="#"
                  style="color: #00b5ff"
                  @click="dialogBtn(item.id)"
                  >{{ item.number }}</a
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="录入时间"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" align="center">
          </el-table-column>
          <el-table-column prop="userName" label="录入人" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button
                size="small"
                type="danger"
                icon="el-icon-delete"
                circle
                class="is-plain"
                @click="deleteBtn(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top: 15px">
        <PageTool
          type=""
          style="margin-top: 20px"
          :paginationPage="page.page"
          :paginationPagesize="page.pagesize"
          :total="page.total"
          @pageChange="handleCurrentChange"
          @pageSizeChange="handleSizeChange"
        ></PageTool>
      </el-row>
    </el-card>
    <question-ids :show-dialog.sync="showDialog" ref="Dialog" />
  </div>
</template>

<script>
// 题型枚举
import { questionType } from "@/api/hmmm/constants.js";
// 列表，删除
import { randoms, removeRandoms } from "@/api/hmmm/questions";
// 分页
import PageTool from "../../module-manage/components/page-tool";
import QuestionIds from "./components/quesetion-ids.vue";
export default {
  components: {
    PageTool,
    QuestionIds,
  },
  data() {
    return {
      showDialog: false,
      page: {
        page: 1,
        pagesize: 20,
        keyword: "",
      },
      list: [],
      alertText: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      const { data } = await randoms(this.page);
      // console.log(data)
      this.list = data.items;
      this.page.total = data.counts;
      this.alertText = `数据一共 ${this.page.total} 条`;
    },
    // 分页功能
    handleSizeChange(val) {
      this.page.pagesize = val;
      if (this.page.page === 1) {
        this.getList(this.page);
      }
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getList();
    },
    handleFilter() {
      this.page.page = 1;
      this.getList();
    },
    resetForm() {
      this.page.keyword = "";
      this.getList();
    },
    async deleteBtn(data) {
      try {
        await this.$confirm("确定是否删除", "提示", {
          type: "warning",
        });
        await removeRandoms(data);
        await this.getList();
        this.$message.success("删除组题列表成功");
      } catch (error) {
        console.log(error);
      }
    },
    // 题型枚举
    formatQuestion(row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value * 1 === cellValue * 1);
      return obj ? obj.label : "未知";
    },
    dialogBtn(id) {
      this.$refs.Dialog.getQuestionDetail(id);
      this.showDialog = true;
    },
  },
};
</script>

<style scoped></style>
